<template>
  <div class="map" ref="charts">地图</div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import chinaJson from './china.json';
const charts = ref();

// 注册地图
echarts.registerMap('china', { geoJSON: chinaJson } as any);

onMounted(() => {
  const myCharts = echarts.init(charts.value);
  const option = {
    geo: [
      {
        map: 'china',
        //鼠标缩放效果
        // roam: true,
        //地图位置
        left: 0,
        top: 50,
        right: 0,
        bottom: -50,
        // 地图上文字设置
        label: {
          show: true,
          color: 'white',
          fontSize: 14,
        },
        //每一个多边形的样式
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#2179AA', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#06254E', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          opacity: 0.9,
        },
        //地图高亮的效果
        emphasis: {
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#9DF0EF', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#2179AA', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          label: {
            fontSize: 40,
          },
        },
      },
    ],
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    series: {
      type: 'lines',
      data: [
        {
          coords: [
            [117.283042, 31.86119], //起点
            [121.472644, 31.231706], //终点
          ],
          lineStyle: {
            color: 'aqua', // 颜色
            width: 1, // 线宽
            curveness: 0.3, // 曲度
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [116.405285, 39.904989],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [119.306239, 26.075302],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [115.892151, 28.676493],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [117.000923, 36.675807],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [114.298572, 30.584355],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [113.280637, 23.125178],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [108.320004, 22.82402],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [110.33119, 20.031971],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [106.504962, 29.533155],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [104.065735, 30.659462],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [106.713478, 26.578343],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [91.132212, 29.660361],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [103.823557, 36.058039],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [106.278179, 38.46637],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [87.617733, 43.792818],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [121.509062, 25.044332],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [111.670801, 40.818311],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
        {
          coords: [
            [117.283042, 31.86119],
            [126.642464, 45.756967],
          ],
          lineStyle: {
            color: 'aqua',
            width: 1,
            curveness: 0.3,
          },
        },
      ],
      // 开启动画特效
      effect: {
        show: true,
        symbol:
          'path://M499.8656 72.8064a32 32 0 0 1 24.2688 0c54.016 22.1184 96.6656 76.3392 96.6656 157.5936v137.8304l320.3072 246.4256a32 32 0 0 1 12.1344 20.48l0.3584 4.864v102.4a32 32 0 0 1-45.4144 29.0304l-287.3856-132.6592v95.1296l98.2016 171.8272a32 32 0 0 1-31.744 47.616l-4.864-0.9728L512 903.6288l-170.3936 48.7424a32 32 0 0 1-38.7072-42.1888l2.0992-4.4544 98.2016-171.8784v-95.0784l-287.3856 132.6592a32 32 0 0 1-45.056-24.4736l-0.3584-4.5568v-102.4c0-9.9328 4.608-19.3024 12.4928-25.344L403.2 368.128V230.4c0-77.2096 38.5024-130.048 88.6784-154.0608l7.9872-3.584zM467.2 230.4v153.6c0 9.9328-4.608 19.3024-12.4928 25.344l-320.3072 246.3744v36.6592l287.3856-132.608a32 32 0 0 1 45.056 24.4736l0.3584 4.5568v153.6a32 32 0 0 1-4.1984 15.872l-63.488 110.9504 103.68-29.5936a32 32 0 0 1 13.2096-0.9216l4.4032 0.9216 103.6288 29.5936-63.4368-110.9504a32 32 0 0 1-3.7376-10.3424l-0.4608-5.5296v-153.6c0-23.3472 24.2176-38.8608 45.4144-29.0304l287.3856 132.608v-36.608l-320.3072-246.4256a32 32 0 0 1-12.1344-20.48l-0.3584-4.864v-153.6c0-46.08-19.0976-76.4928-44.6976-92.16-25.8048 15.6672-44.9024 46.08-44.9024 92.16z',
        color: 'red',
        symbolSize: [10, 15], //高和宽
        roundTrip: true, //原路返回
      },
    },
  };
  myCharts.setOption(option);
});
</script>

<style lang="scss" scoped></style>
